<template>
  <div>
    <h2>MD5 Generator</h2>
    <div class="md5-generator">

    <div class="container input-container">
      <input
        type="text"
        v-model="inputText"
        placeholder="Enter text to generate MD5"
        class="input-field"
      />
      <button @click="generateMD5" class="execute-button">Generate MD5</button>
    </div>
    <div class="md5-history">
      <h3>MD5 History</h3>
      <ul>
        <li v-for="(record, index) in md5History" :key="index" class="md5-item">
          <span class="hash">{{ record.hash }}</span>
          <span class="timestamp">{{ new Date(record.timestamp).toLocaleString() }}</span>
          <button @click="showOriginalText(record.original,record.timestamp)" class="show-original-button">Show Original</button>
        </li>
      </ul>
    </div>
    <div v-if="showDialog" class="dialog-overlay">
      <div class="dialog-content">
        <p>{{ originalTextToShow }}</p>
        <button @click="closeDialog" class="dialog-close-button">Close</button>
      </div>
    </div>
  </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import CryptoJS from 'crypto-js';

export default defineComponent({
  name: 'MD5Generator',
  setup() {
    const inputText = ref('');
    const md5History = ref<Array<{ original: string; hash: string; timestamp: number }>>([]);
    const showDialog = ref(false);
    let originalTextToShow = ref('');
    let originTime = ref('');

    const generateMD5 = () => {
      if (inputText.value.trim() !== '') {
        const original = inputText.value;
        const hash = CryptoJS.MD5(original).toString();
        const timestamp = Date.now(); 
        md5History.value.push({ original, hash, timestamp });
        inputText.value = ''; // Clear the input field after generating MD5
      }
    };

    const showOriginalText = (originalText: string,timestamp:number) => {
      console.log(originalText)
      originalTextToShow.value = originalText;
      originTime.value = timestamp + '';
      showDialog.value = true;
    };

    const closeDialog = () => {
      showDialog.value = false;
    };

    return {
      inputText,
      md5History,
      showDialog,
      originalTextToShow,
      generateMD5,
      showOriginalText,
      closeDialog,
    };
  },
});
</script>

<style lang="scss" scoped>
@use "../assets/common.scss";
@use "../assets/md5.scss";
</style>